import React from 'react';
import { Card, Steps, Tag, Breadcrumb, Timeline, Space } from 'antd';
import { HomeOutlined, CheckCircleFilled, ClockCircleOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './Process.module.less';

const Process: React.FC = () => {
  const processData = {
    currentStage: '现场验收',
    timeline: [
      {
        time: '2024-03-20 10:30',
        title: '材料审核完成',
        status: 'finish',
        description: '验收材料已通过审核'
      },
      {
        time: '2024-03-21 09:00',
        title: '开始现场验收',
        status: 'process',
        description: '验收专家组正在进行现场验收'
      },
      {
        time: '预计 2024-03-25',
        title: '问题整改',
        status: 'wait',
        description: '等待现场验收完成后开始'
      },
      {
        time: '预计 2024-03-30',
        title: '验收确认',
        status: 'wait',
        description: '等待整改完成后进行'
      }
    ]
  };

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '档案正式验收',
          },
          {
            title: '验收过程',
          }
        ]} />
      </div>

      <Space direction="vertical" size={24} style={{ width: '100%' }}>
        <Card title="当前进度" className={styles.processCard}>
          <Steps
            current={1}
            className={styles.steps}
            items={[
              {
                title: '材料审核',
                status: 'finish' as const,
                description: '已完成',
              },
              {
                title: '现场验收',
                status: 'process' as const,
                description: '进行中',
              },
              {
                title: '问题整改',
                status: 'wait' as const,
                description: '待开始',
              },
              {
                title: '验收确认',
                status: 'wait' as const,
                description: '待开始',
              }
            ]}
          />
        </Card>

        <Card title="验收记录" className={styles.timelineCard}>
          <Timeline
            className={styles.timeline}
            items={processData.timeline.map(item => ({
              color: item.status === 'finish' ? 'green' : item.status === 'process' ? 'blue' : 'gray',
              dot: item.status === 'finish' ? <CheckCircleFilled /> : 
                   item.status === 'process' ? <ClockCircleOutlined style={{ fontSize: '16px' }} /> : undefined,
              children: (
                <div className={styles.timelineItem}>
                  <div className={styles.timelineTime}>{item.time}</div>
                  <div className={styles.timelineContent}>
                    <div className={styles.timelineTitle}>
                      {item.title}
                      <Tag 
                        color={
                          item.status === 'finish' ? 'success' : 
                          item.status === 'process' ? 'processing' : 
                          'default'
                        }
                      >
                        {item.status === 'finish' ? '已完成' : 
                         item.status === 'process' ? '进行中' : 
                         '待开始'}
                      </Tag>
                    </div>
                    <div className={styles.timelineDescription}>{item.description}</div>
                  </div>
                </div>
              ),
            }))}
          />
        </Card>
      </Space>
    </MainLayout>
  );
};

export default Process; 